<script setup>
import { ref } from "@vue/reactivity";
import Tag from "@c/tag/Tag.vue"


import getEventBqus from "@utils/eventBus.js";
import {SIDERCHANGE,TAGCHANGE} from "@utils/myConst.js";
const eb = getEventBqus();
const packSider = ref(false);
// 需要将消息q发送给sider---让它们两个利用eventBus进行通信算了
const toggleIcon = function () {
    packSider.value = !packSider.value;
    eb.emit(SIDERCHANGE,"Header",packSider.value);
}
eb.on(TAGCHANGE,"Header",(tagName)=>{
    let exist = false;
    tags.value.forEach(v => {
        if(v.name !== tagName && v.active) v.active = false;
        if(v.name === tagName) {
            exist = true;
            v.active = true; 
        }
    });
    if(!exist) {
        tags.value.push({
            name: tagName,
            active: true,
            delable: true,
        });
    }
})


// 管理tags
// 父子间用事件解决
// Header和Sider之间用 eventBus解决
const tags = ref([]);
tags.value.push({
    name: "home",
    active: true,
    delable: false
})

const checkTag = function(tagName) {
    eb.emit(TAGCHANGE,"Header",tagName);
}
const delTag = function(tagName) {
    let k = -1;
    tags.value.some((v,index)=>{
        if(v.name === tagName)k = index;
    })
    if(k===-1)return ;
    tags.value[k-1].active = true;
    tags.value.splice(k,1);
}




</script>                                       

<template>
    <div class="header-main-container">
        <div class="header-top-container">
            <div class="header-icon-container" @click="toggleIcon">
                <Licon :name="packSider?'pack':'unpack'"></Licon>
            </div>
        </div>
        <div class="header-state-container">
            <Tag v-for="item in tags" :key="item.name" :name="item.name" :active="item.active" :delable="item.delable"
            @checkTag="checkTag(item.name)"
            @delTag="delTag(item.name)"
            ></Tag>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "@scss/header/header.scss";
</style>